<template>
  <div class="layer-panel">
    <div class="layer-header">
      <h3>图层管理</h3>
      <div class="layer-actions">
        <el-button size="small" @click="expandAll" :disabled="!hasLayers">
          <el-icon><Expand /></el-icon>
          展开全部
        </el-button>
        <el-button size="small" @click="collapseAll" :disabled="!hasLayers">
          <el-icon><Fold /></el-icon>
          折叠全部
        </el-button>
      </div>
    </div>
    
    <div class="layer-content">
      <div v-if="layers.length === 0" class="empty-layers">
        <el-icon><CopyDocument /></el-icon>
        <span>暂无图层</span>
      </div>
      
      <div v-else class="layer-list">
        <div
          v-for="layer in layers"
          :key="layer.id"
          class="layer-item"
          :class="{ active: layer.id === selectedComponentId }"
          @click="$emit('select-layer', layer)"
        >
          <div class="layer-info">
            <el-icon class="layer-icon"><component :is="layer.icon || 'Grid'" /></el-icon>
            <span class="layer-name">{{ layer.name }}</span>
          </div>
          <div class="layer-actions">
            <el-button
              circle
              plain
              size="small"
              :icon="layer.visible === false ? View : Hide"
              @click.stop="$emit('toggle-visibility', layer)"
            />
            <el-button
              circle
              plain
              size="small"
              type="danger"
              :icon="Delete"
              @click.stop="$emit('delete-layer', layer)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import {
  Grid,
  CopyDocument,
  View,
  Hide,
  Delete,
  Expand,
  Fold
} from '@element-plus/icons-vue'

const props = defineProps({
  layers: {
    type: Array,
    default: () => []
  },
  selectedComponentId: {
    type: [String, Number],
    default: null
  }
})

const emit = defineEmits([
  'select-layer',
  'toggle-visibility',
  'delete-layer',
  'expand-all',
  'collapse-all'
])

const hasLayers = computed(() => props.layers.length > 0)

const getLayerTypeName = (type) => {
  const typeMap = {
    'text': '文本',
    'image': '图片',
    'iframe': '内嵌页面',
    'bar': '柱状图',
    'line': '折线图',
    'pie': '饼图',
    'ring': '环形图',
    'scatter': '散点图',
    'counter': '计数器',
    'progress': '进度条',
    'statistic': '统计数值',
    'clock': '时钟',
    'video': '视频',
    'carousel': '轮播图',
    'weather': '天气',
    'table-basic': '基础表格',
    'table-scroll': '滚动表格',
    'list-basic': '基础列表',
    'list-scroll': '滚动列表',
    'map-china': '中国地图',
    'map-world': '世界地图'
  }
  
  // 处理装饰组件
  if (type.startsWith('border-')) {
    return '边框装饰'
  } else if (type.startsWith('decoration-')) {
    return '装饰组件'
  }
  
  return typeMap[type] || '未知类型'
}

const selectLayer = (layer) => {
  emit('select-layer', layer)
}

const toggleVisibility = (layer) => {
  emit('toggle-visibility', layer)
}

const deleteLayer = (layer) => {
  emit('delete-layer', layer)
}

const expandAll = () => {
  emit('expand-all')
}

const collapseAll = () => {
  emit('collapse-all')
}
</script>

<style scoped>
.layer-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #1d2537;
  border-left: 1px solid #2a3555;
}

.layer-header {
  padding: 16px;
  border-bottom: 1px solid #2a3555;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.layer-header h3 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.layer-actions {
  display: flex;
  gap: 8px;
}

.layer-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.empty-layers {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
}

.empty-layers .el-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.layer-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.layer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 8px;
  background: #2a3555;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.layer-item:hover {
  background: #3a4565;
  border-color: #409eff;
}

.layer-item.active {
  background: #409eff;
  border-color: #409eff;
}

.layer-item.is-hidden {
  opacity: 0.5;
}

.layer-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.layer-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  flex-shrink: 0;
}

.layer-icon .el-icon {
  font-size: 18px;
  color: #fff;
}

.layer-name {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-type {
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* 滚动条样式 */
.layer-list::-webkit-scrollbar {
  width: 6px;
}

.layer-list::-webkit-scrollbar-thumb {
  background: #3d4565;
  border-radius: 3px;
}

.layer-list::-webkit-scrollbar-track {
  background: #1d2537;
}
</style> 